<script lang="ts" setup>
import { Modal } from 'ant-design-vue';

defineProps<{
  visible: boolean;
}>();

const emit = defineEmits<{
  'update:visible': [value: boolean];
}>();
</script>

<template>
  <Modal
    :open="visible"
    title="📋 资源分类使用场景示例与操作指南"
    width="1200px"
    :footer="null"
    @cancel="emit('update:visible', false)"
  >
    <div class="category-usage-guide">
      <div class="guide-header">
        <p class="guide-subtitle">
          详细的操作步骤和配置说明，帮助您快速上手资源分类管理
        </p>
      </div>

      <!-- 操作流程说明 -->
      <div class="guide-section">
        <div class="section-header">
          <h3>🔄 标准操作流程</h3>
        </div>
        <div class="section-content">
          <ol class="process-list">
            <li>创建分类 → 配置属性 → 管理资源 → 关联模板</li>
            <li>在资源模板管理中关联模板到该分类</li>
            <li>在调度规则管理中设置分类的调度规则</li>
            <li>设置权限控制，监控分类使用情况</li>
          </ol>
        </div>
      </div>

      <!-- 酒店业态详细示例 -->
      <div class="guide-section">
        <div class="section-header">
          <h3>🏨 酒店业态 - 客房资源分类配置</h3>
        </div>
        <div class="section-content hotel-example">
          <div class="config-section">
            <h4>📝 分类基本信息配置</h4>
            <ul>
              <li>分类名称：客房资源分类</li>
              <li>分类编码：HOTEL_ROOM_CATEGORY</li>
              <li>分类类型：业务分类</li>
              <li>描述：酒店客房相关资源的统一分类管理</li>
              <li>排序：1</li>
            </ul>
          </div>
          <div class="config-section">
            <h4>🏷️ 子分类结构</h4>
            <ul>
              <li>标准客房分类：101-120房间</li>
              <li>豪华套房分类：201-210房间</li>
              <li>总统套房分类：301-305房间</li>
              <li>商务客房分类：401-420房间</li>
            </ul>
          </div>
          <div class="config-section">
            <h4>🔗 关联配置</h4>
            <ul>
              <li>关联模板：标准客房模板、豪华套房模板</li>
              <li>调度规则：客房预订规则、清洁调度规则</li>
              <li>权限设置：前台可查看，客房部可管理</li>
            </ul>
          </div>
          <div class="config-section">
            <h4>📋 操作步骤</h4>
            <ol>
              <li>点击"新增分类" → 填写基本信息 → 保存</li>
              <li>点击"管理资源" → 选择客房资源 → 分配到分类</li>
              <li>在模板管理中关联对应的客房模板</li>
              <li>设置调度规则和权限控制</li>
            </ol>
          </div>
        </div>
      </div>

      <!-- 温泉洗浴业态详细示例 -->
      <div class="guide-section">
        <div class="section-header">
          <h3>♨️ 温泉洗浴业态 - 温泉资源分类配置</h3>
        </div>
        <div class="section-content spa-example">
          <div class="config-section">
            <h4>📝 分类基本信息配置</h4>
            <ul>
              <li>分类名称：温泉资源分类</li>
              <li>分类编码：SPA_HOT_SPRING_CATEGORY</li>
              <li>分类类型：业务分类</li>
              <li>描述：温泉洗浴相关资源的统一分类管理</li>
              <li>排序：2</li>
            </ul>
          </div>
          <div class="config-section">
            <h4>🏷️ 子分类结构</h4>
            <ul>
              <li>室内温泉分类：A区温泉池</li>
              <li>户外温泉分类：B区温泉池</li>
              <li>私密温泉分类：VIP温泉池</li>
              <li>温泉设施分类：更衣室、淋浴区</li>
            </ul>
          </div>
          <div class="config-section">
            <h4>🔗 关联配置</h4>
            <ul>
              <li>关联模板：温泉池模板、SPA服务模板</li>
              <li>调度规则：温泉池调度规则、技师排班规则</li>
              <li>权限设置：温泉部可管理，前台可预订</li>
            </ul>
          </div>
          <div class="config-section">
            <h4>📋 操作步骤</h4>
            <ol>
              <li>点击"新增分类" → 填写基本信息 → 保存</li>
              <li>点击"管理资源" → 选择温泉资源 → 分配到分类</li>
              <li>在模板管理中关联对应的温泉模板</li>
              <li>设置调度规则和权限控制</li>
            </ol>
          </div>
        </div>
      </div>

      <!-- 餐饮业态详细示例 -->
      <div class="guide-section">
        <div class="section-header">
          <h3>🍽️ 餐饮业态 - 餐桌资源分类配置</h3>
        </div>
        <div class="section-content dining-example">
          <div class="config-section">
            <h4>📝 分类基本信息配置</h4>
            <ul>
              <li>分类名称：餐桌资源分类</li>
              <li>分类编码：DINING_TABLE_CATEGORY</li>
              <li>分类类型：业务分类</li>
              <li>描述：餐厅餐桌相关资源的统一分类管理</li>
              <li>排序：3</li>
            </ul>
          </div>
          <div class="config-section">
            <h4>🏷️ 子分类结构</h4>
            <ul>
              <li>大厅餐桌分类：散客区域餐桌</li>
              <li>包间餐桌分类：包间区域餐桌</li>
              <li>露台餐桌分类：户外露台餐桌</li>
              <li>VIP餐桌分类：VIP专属餐桌</li>
            </ul>
          </div>
          <div class="config-section">
            <h4>🔗 关联配置</h4>
            <ul>
              <li>关联模板：包间服务模板、餐桌配置模板</li>
              <li>调度规则：餐桌预订规则、翻台调度规则</li>
              <li>权限设置：餐饮部可管理，前台可预订</li>
            </ul>
          </div>
          <div class="config-section">
            <h4>📋 操作步骤</h4>
            <ol>
              <li>点击"新增分类" → 填写基本信息 → 保存</li>
              <li>点击"管理资源" → 选择餐桌资源 → 分配到分类</li>
              <li>在模板管理中关联对应的餐桌模板</li>
              <li>设置调度规则和权限控制</li>
            </ol>
          </div>
        </div>
      </div>

      <!-- 技术资源示例 -->
      <div class="guide-section">
        <div class="section-header">
          <h3>🔧 技术资源 - 表单模板分类配置</h3>
        </div>
        <div class="section-content tech-example">
          <div class="config-section">
            <h4>📝 分类基本信息配置</h4>
            <ul>
              <li>分类名称：表单模板分类</li>
              <li>分类编码：FORM_TEMPLATE_CATEGORY</li>
              <li>分类类型：技术分类</li>
              <li>描述：各种业务表单模板的统一分类管理</li>
              <li>排序：4</li>
            </ul>
          </div>
          <div class="config-section">
            <h4>🏷️ 子分类结构</h4>
            <ul>
              <li>客户信息表单分类：客户资料收集表单</li>
              <li>预约表单分类：服务预约表单</li>
              <li>反馈表单分类：客户反馈表单</li>
              <li>调查表单分类：满意度调查表单</li>
            </ul>
          </div>
          <div class="config-section">
            <h4>🔗 关联配置</h4>
            <ul>
              <li>关联模板：表单模板、API模板</li>
              <li>调度规则：表单访问规则、数据同步规则</li>
              <li>权限设置：开发人员可编辑，用户可填写</li>
            </ul>
          </div>
          <div class="config-section">
            <h4>📋 操作步骤</h4>
            <ol>
              <li>点击"新增分类" → 填写基本信息 → 保存</li>
              <li>点击"管理资源" → 选择表单资源 → 分配到分类</li>
              <li>在模板管理中关联对应的表单模板</li>
              <li>设置访问规则和权限控制</li>
            </ol>
          </div>
        </div>
      </div>

      <!-- 最佳实践总结 -->
      <div class="guide-section">
        <div class="section-header">
          <h3>💡 最佳实践与使用技巧</h3>
        </div>
        <div class="section-content best-practices">
          <div class="practice-section">
            <h4>🎯 分类设计原则</h4>
            <ul>
              <li><strong>层次清晰</strong>：分类层级要清晰，避免过深或过浅</li>
              <li><strong>命名规范</strong>：分类名称要简洁明了，便于识别</li>
              <li><strong>逻辑合理</strong>：分类逻辑要符合业务习惯</li>
              <li><strong>扩展性强</strong>：支持后续业务扩展和调整</li>
            </ul>
          </div>
          <div class="practice-section">
            <h4>⚙️ 资源管理技巧</h4>
            <ul>
              <li><strong>批量操作</strong>：支持批量添加和移除资源</li>
              <li><strong>搜索过滤</strong>：提供强大的搜索和过滤功能</li>
              <li><strong>状态管理</strong>：合理管理资源的启用/禁用状态</li>
              <li><strong>权限控制</strong>：设置细粒度的权限控制</li>
            </ul>
          </div>
          <div class="practice-section">
            <h4>🔧 关联配置策略</h4>
            <ul>
              <li><strong>模板关联</strong>：合理关联模板，提升配置效率</li>
              <li><strong>规则设置</strong>：设置合适的调度和业务规则</li>
              <li><strong>权限分配</strong>：根据业务角色分配相应权限</li>
              <li><strong>监控告警</strong>：设置分类使用情况监控</li>
            </ul>
          </div>
          <div class="practice-section">
            <h4>📊 维护与优化</h4>
            <ul>
              <li><strong>定期清理</strong>：定期清理无用的分类和资源</li>
              <li><strong>性能优化</strong>：优化分类查询和资源管理性能</li>
              <li><strong>用户培训</strong>：培训用户正确使用分类功能</li>
              <li><strong>持续改进</strong>：根据使用反馈持续改进分类体系</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </Modal>
</template>

<style scoped>
.category-usage-guide {
  max-height: 70vh;
  overflow-y: auto;
  padding: 0;
}

.guide-header {
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.guide-subtitle {
  color: #666;
  font-size: 14px;
  margin: 0;
}

.guide-section {
  margin-bottom: 24px;
  background: #fafafa;
  border-radius: 6px;
  padding: 16px;
  border: 1px solid #e8e8e8;
}

.section-header h3 {
  color: #1890ff;
  font-size: 16px;
  margin-bottom: 12px;
  border-left: 3px solid #1890ff;
  padding-left: 8px;
}

.section-content {
  color: #262626;
  line-height: 1.5;
}

.process-list {
  padding-left: 16px;
}

.process-list li {
  margin-bottom: 6px;
  color: #595959;
}

.config-section {
  margin-bottom: 16px;
  padding: 12px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
}

.config-section h4 {
  color: #1890ff;
  margin-bottom: 8px;
  font-size: 14px;
}

.config-section ul {
  margin: 0;
  padding-left: 16px;
}

.config-section li {
  margin-bottom: 4px;
  color: #595959;
  font-size: 13px;
}

.config-section ol {
  margin: 0;
  padding-left: 16px;
}

.config-section ol li {
  margin-bottom: 6px;
  color: #595959;
  font-size: 13px;
}

.practice-section {
  margin-bottom: 16px;
  padding: 12px;
  background: #fff;
  border-radius: 4px;
  border-left: 3px solid #faad14;
}

.practice-section h4 {
  color: #1890ff;
  margin-bottom: 8px;
  font-size: 14px;
}

.practice-section ul {
  margin: 0;
  padding-left: 16px;
}

.practice-section li {
  margin-bottom: 6px;
  color: #595959;
  font-size: 13px;
}

.practice-section strong {
  color: #1890ff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .guide-section {
    padding: 12px;
  }

  .section-header h3 {
    font-size: 14px;
  }

  .config-section {
    padding: 8px;
  }

  .config-section h4 {
    font-size: 13px;
  }

  .config-section li {
    font-size: 12px;
  }
}
</style>
